/* 一、div中img水平居中： */

{ 
  display:table;
  margin:0 auto;
}

/* 二、img与span水平对齐: */

{
  display: flex; 
  align-items:center;
}

/* 三、div中div水平居中（不知宽度&设置position：absolute情况下）:*/{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

/* 四、div中span垂直居中：
 */
{
  vertical-align: middle;
}

/* 五、Flex弹性盒子：用flex实现垂直居中（父元素body，子元素main） */
body{ 
  display:flex; 
  align-items:center; 
}
main{ 
  display:flex;
  align-items:center;
  justify-content:center; 
  flex-direction:column;
}

/* 六、position：absolute 绝对定位：实现整体居中（已知宽高度情况下） */

main { 
  position: absolute;
  width: 18em;
  height: 10em;
  top: 50%;
  left: 50%;
  margin-top: -9em; 
  margin-left: -5em;
}